<template>
    <el-drawer
    :title="this.$t('titles.networkSettings')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="wifiBox"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <div class="tipBox" v-show="showMore">
          <p>请确保有可用的热点或无线网络。如需设置网关，注:</p>
          <p>IOS手机为<span>172.20.10.xx</span>  xx为2-20之间</p>
          <p>安卓或路由为<span>192.168.43.xxx</span>  xx为0-255之间</p>
        </div>
        <el-form ref="ruleForm" class="wifiForm">
            <el-form-item>
                <div class="flex formItem">
                    <div class="itemLeft">{{ this.$t("titles.wifiName")}}</div>
                    <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.wifiName')" v-model="wifiName"></div>
                </div>
            </el-form-item>

            <el-form-item>
                <div class="flex formItem">
                    <div class="itemLeft">{{ this.$t("titles.wifiPsw")}}</div>
                    <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.wifiPsw')" v-model="wifiPsw"></div>
                </div>
            </el-form-item>

            <div class="showMore" v-if="showMore" @click="showMoreBtn">更多设置<i class="el-icon-d-arrow-right moreIcon"></i></div>
            <div v-else>
                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">IP类型</div>
                        <div class="itemRight flex switchBox">
                            <el-switch
                            v-model="selectIP"
                            active-text="手动IP"
                            inactive-text="自动IP">
                            </el-switch>
                        </div>
                    </div>
                </el-form-item>
                
                <div v-show="selectIP">
                    <!-- IP -->
                    <el-form-item>
                        <div class="flex formItem">
                            <div class="itemLeft">IP</div>
                            <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.wifiIP')" v-model="wifiIp"></div>
                        </div>
                    </el-form-item>
                    <!-- 子掩码 -->
                    <el-form-item>
                        <div class="flex formItem">
                            <div class="itemLeft">{{ this.$t("titles.ipMask")}}</div>
                            <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.ipMask')" v-model="ipMask"></div>
                        </div>
                    </el-form-item>
                    <!-- 网关 -->
                    <el-form-item>
                        <div class="flex formItem">
                            <div class="itemLeft">{{ this.$t("titles.gateway")}}</div>
                            <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.gateway')" v-model="gateway" @keyup.enter="submitForm('ruleForm')"></div>
                        </div>
                    </el-form-item>
                </div>
                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.saveSettings")}}</div>
                        <div class="itemRight saveSetting flex"><el-checkbox v-model="checked" @keyup.enter="submitForm('ruleForm')"></el-checkbox></div>
                    </div>
                </el-form-item>
            </div>
            
            <div class="flex formBtns">
                <el-button size="small" @click="resetForm('ruleForm')">{{ this.$t("buttons.restoration")}}</el-button>
                <el-button size="small" type="primary" @click="submitForm('ruleForm')">{{ this.$t("buttons.submit")}}</el-button>
            </div>
        </el-form>
    </el-drawer>
    
</template>

<script>
import { showWifi, subWifiSet, wifiRest} from '../js/wifi'
import { _isMobile } from "../js/methods"
export default {
    name: 'wifiSetting',
    components:{

    },
    data(){
        return{
            drawer: this.$store.state.showWifiSetting,
            direction: 'btt',
            closable: true,
            showClose: false,

            wifiName: '',
            wifiPsw:'',
            selectIP: false,
            wifiIp:'192.168.43.233',
            ipMask:'255.255.255.0',
            gateway:'192.168.43.1',
            checked: false,
            isMobile: '',
            showMore: true
        }
    },
    methods:{
        //显示更多
        showMoreBtn(){
            this.showMore = !this.showMore
        },

        //提交
        submitForm(formName) {
            const that = this;
            let options = {
                ssid:that.wifiName,
                password: that.wifiPsw,
                ip: that.wifiIp,
                mask: that.ipMask,
                gateway: that.gateway,
                checked: that.checked,
                selectIP: that.selectIP,
                isMobile: that.isMobile
            }
            subWifiSet(options);
        },

        //复位
        resetForm() {
            wifiRest({})
        },

        //关闭模态框
        closeDrawer: function(){
            showWifi(false)
        }
    },
    mounted(){
        //判断是移动端还是PC端
        //在判断是IOS还是Android
        if (_isMobile()) {
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                this.wifiIp = "172.20.10.15";
                this.gateway = "172.20.10.1"
                this.isMobile = "ios";
                //Ios
            } else if (/(Android)/i.test(navigator.userAgent)) {
                //Android终端
                this.wifiIp = "192.168.43.233";
                this.gateway = "192.168.43.1";
                this.isMobile = "android";
            }
        } else {
            this.isMobile = "pc"
        }
    },

    //属性监听,判断是否有缓存wifi数据
    watch:{
        "$store.state.showWifiSetting": function(val){
           this.drawer = val;
       },

       '$store.state.wifiInfos':function(val){
            let infos = JSON.parse(val);
            this.wifiName = infos.ssid;
            this.wifiPsw = infos.password;
            this.wifiIp = infos.ip;
            this.mask = infos.mask;
            this.gateway = infos.gateway;
            this.checked = !infos.checked
       }
    }

}
</script>

<style scoped lang="less">
.tipBox{
    position: fixed;
    width: 100%;
    padding: 20px;
    text-align: left;
    color: #ffffff;
    top: 30%;
    left: 0;
    font-size: 14px;
    span{
    color: #409eff;
    }
}
 .wifiForm{
     padding: 0 15px;
     .formItem{
        line-height: normal;
        border-bottom: 1px solid #eeeeee;
        .itemLeft{
            flex: 3;
            padding-right: 15px;
        }
        .itemRight{
            height: 40px;
            flex: 7;
            input{
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .switchBox{
            justify-content: flex-start;
        }
        .saveSetting{
            margin-left: 1em;
            justify-content: flex-start;
        }
    }
     .formBtns{
        padding: 0 5px;
        margin-top: 15px;
        justify-content: space-between;
        button{
            width: 40%;
        }
    }
    .showMore{
        text-align: center;
        color: #409EFF;
        padding-top: 5px;
        .moreIcon{
            transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            -o-transform:rotate(90deg);
        }
    }
 }
 .el-form-item{
     margin-bottom: 0;
 }
  .el-form-item__content{
    line-height: 20px;
}
</style>